<template>
  <div>
    <el-button type="primary" @click="submit">保存</el-button>
  </div>
  <el-tree
    ref="tree"
    :data="list"
    show-checkbox
    node-key="id"
    default-expand-all
    :default-checked-keys="defCheckedIds"
    :props="defaultProps"
  />
</template>
<script setup lang="ts">
import { allMenuApi, getMenuByRoleIdApi } from "@/api";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { ElTree } from "element-plus";
const route = useRoute();

const tree = ref<InstanceType<typeof ElTree> | null>(null);

const defaultProps = {
  children: "children",
  label: "title",
};

const list = ref<Menu[]>([]);

allMenuApi().then((res) => {
  if (res.code === 200) {
    list.value = res.data;
  }
});
let defCheckedIds = ref<number[]>([]);
getMenuByRoleIdApi(parseInt(route.query.id as string)).then((res) => {
  if (res.code === 200) {
    defCheckedIds.value = res.data
      .filter((item) => item.parentId !== 0)
      .map((item) => item.id);
    console.log(defCheckedIds.value);
  }
});

const submit = () => {
  let ids = tree.value?.getCheckedKeys();
  console.log(ids);
};
</script>
<style lang="less" scoped></style>
